<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide()" :mask-closable="false" width="950">

            <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :max-height="650">
                <template slot-scope="{ row, index }" slot="changeType">
                    <span v-if="row.changeType == 1">充值</span>
                    <span v-if="row.changeType == 2">直推佣金</span>
                    <span v-if="row.changeType == 3">间推佣金</span>
                    <span v-if="row.changeType == 4">订单分红</span>
                    <span v-if="row.changeType == 5">等级分红</span>
                    <span v-if="row.changeType == 6">分享直推收益</span>
                    <span v-if="row.changeType == 7">分享间推收益</span>
                    <span v-if="row.changeType == 8">积分赠送</span>
                    <span v-if="row.changeType == 9">退款</span>
                    <span v-if="row.changeType == 10">提现</span>
                    <span v-if="row.changeType == 11">购买</span>
                    <span v-if="row.changeType == 12">平台减少</span>
                    <span v-if="row.changeType == 13">平台增加</span>
                </template>

                <template slot-scope="{ row, index }" slot="changeAmount">
                    <span v-if="row.changeType == 1 || row.changeType == 2 || row.changeType == 3 || row.changeType == 4 || row.changeType == 5 || row.changeType == 6 || row.changeType == 7 || row.changeType == 8  || row.changeType == 13">+</span>
                    <span v-if="row.changeType == 9 || row.changeType == 10 || row.changeType == 11 || row.changeType == 12">-</span>
                    <span>{{row.changeAmount}}</span>
                </template>

                <template slot-scope="{ row, index }" slot="adminName">
                    <span>{{row.adminName ? row.adminName : '-'}}</span>
                </template>

            </Table>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide()">取消</Button>
                <Button type="primary" @click="hide()" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "user-capital",
        data() {
            return {
                isShowModal: false,
                loadingBtn: false,
                title: '查看信息',
                params: {
                    userId: '',
                    capitalType: ''
                },
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '变动描述',
                        minWidth: 180,
                        key: 'title'
                    },
                    {
                        title: '变动类型',
                        minWidth: 120,
                        slot: 'changeType'
                    },
                    {
                        title: '变动金额（元）',
                        minWidth: 120,
                        slot: 'changeAmount'
                    },
                    {
                        title: '余额（元）',
                        minWidth: 120,
                        key: 'afterAmount'
                    },
                    {
                        title: '管理员',
                        minWidth: 120,
                        slot: 'adminName'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        width: 150
                    }
                ],
                data: []
            }
        },
        methods: {
            // 显示模态框
            show(row, type) {
                this.isShowModal = true;
                if (type == '1') {
                    this.title = '查看余额记录';
                    this.columns[3].title = '变动金额（元）';
                    this.columns[4].title = '余额（元）';
                }
                if (type == '2') {
                    this.title = '查看知豆记录'
                    this.columns[3].title = '变动数量（个）';
                    this.columns[4].title = '知豆（个）';
                }
                this.params.userId = row.userId;
                this.params.capitalType = type;
                this.findUserCapital();
            },
            // 查询资金详情
            findUserCapital(row) {
                this.$Spin.show();
                this.axios.post('/user/findUserCapital', this.params).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.data = res.data.userCapitalRecord;
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看资金接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            }
        }
    }
</script>

<style scoped>

</style>